<template>
  <div>
    <el-row class="chart" :id="id" :style="clstyle"></el-row>
  </div>
</template>

<script>
export default {
  props: {
    // 图表 ID
    id: {
      type: String,
      required: true
    },
    // 图表 样式
    clstyle: {
      type: Object,
      required: false
    },
    // 图表 图表的配置项
    option: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    }
  },
  mounted() {
    // 绘制图表
    this.getEcharts()
  },
  methods: {
    // 绘制图表
    getEcharts() {
      const chart = echarts.init(
        document.getElementById(this.id)
      )
      if (this.option) chart.setOption(this.option)
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
  },
  computed: {
    yAxis() {
      return this.option
    }
  },
  watch: {
    yAxis: {
      handler (value) {
        this.option = value
        this.getEcharts()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
}
</style>
